<template>
  <div class="wrapper">
    <a-card title="企业/团队信息" class="margin-bottom">
      <a-flex>
        <a-descriptions :column="1" :labelStyle="{width: '150px'}">
          <a-descriptions-item label="企业/团队名称">{{teamStore.data?.name}}</a-descriptions-item>
          <a-descriptions-item label="企业团队ID">{{teamStore.data?.id}}</a-descriptions-item>
          <a-descriptions-item label="企业/团队拥有者">王斌</a-descriptions-item>
          <a-descriptions-item label="联系电话">17787937708</a-descriptions-item>
          <a-descriptions-item label="联系邮箱">763093576@qq.com</a-descriptions-item>
          <a-descriptions-item label="企业/团队描述">暂无描述</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{teamStore.data?.create_time}}</a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag color="green" v-if="teamStore.data?.status">正常使用</a-tag>
            <a-tag color="red" v-else>已停止使用</a-tag>
          </a-descriptions-item>
        </a-descriptions>
        <div style="flex: 0 0 40%;padding-left: 32px" class="border-left">
          <div class="margin-bottom">企业/团队LOGO</div>
          <a-avatar :size="64" shape="square" :src="teamStore.data?.avatar" v-if="teamStore.data?.avatar"/>
          <a-avatar :size="64" shape="square" :src="getRandomAvatar()" v-else/>
          <div class="padding-top-md text-color-gray">点击图片上传新的企业/团队LOGO</div>
        </div>
      </a-flex>
      <template #extra>
        <a-button><edit-outlined/>编辑</a-button>
      </template>
    </a-card>
    <Capacity/>
    <a-card title="更多操作">
      <a-list>
        <a-list-item>
          <a-list-item-meta title="转移组织/企业/团队归属" description="移交组织团队所有权">
            <template #avatar>
              <a-avatar shape="square" class="ant-tag-green" size="large"><user-switch-outlined/></a-avatar>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a-button type="text">移交</a-button>
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta title="解散组织/企业/团队"
                            description="一旦你删除了企业/团队，企业/团队内所有内容以及所关联的所有数据都将会被永久删除。这是一个不可恢复的操作，请谨慎对待！">
            <template #avatar>
              <a-avatar shape="square" class="ant-tag-red" size="large"><delete-outlined/></a-avatar>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a-button type="text" danger @click="removeTeam">解散</a-button>
          </template>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import {useOrgStore} from "@/store/modules/organization";
import {EditOutlined,UserSwitchOutlined,DeleteOutlined} from "@ant-design/icons-vue";
import {getRandomAvatar} from "@/utils/avatar.ts";
import Capacity from "@/views/admin/index/components/Capacity.vue";
import {Modal} from "ant-design-vue";
const teamStore = useOrgStore()
const removeTeam = ()=>{
  Modal.confirm({
    title: '解散组织/企业/团队',
    content: '确定要解散该组织/企业/团队吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      await teamStore.remove()
    }
  })
}
</script>

<style scoped>

</style>